<!DOCTYPE html>
<html>
<head>
    <title>Diagrama del sistema Tierra-Luna</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        /**
         * Dibuja texto con un subíndice.
         * @param {CanvasRenderingContext2D} ctx - El contexto del canvas.
         * @param {string} text - El texto base.
         * @param {string} sub - El texto del subíndice.
         * @param {number} x - La coordenada x.
         * @param {number} y - La coordenada y.
         */
        function drawSubscript(ctx, text, sub, x, y) {
            const originalFont = ctx.font;
            const originalBaseline = ctx.textBaseline;

            ctx.textBaseline = 'middle';
            ctx.font = "italic 22px 'Times New Roman'";
            const textMetrics = ctx.measureText(text);
            ctx.fillText(text, x, y);

            ctx.font = "italic 16px 'Times New Roman'";
            ctx.fillText(sub, x + textMetrics.width, y + 6);

            ctx.font = originalFont;
            ctx.textBaseline = originalBaseline;
        }

        /**
         * Dibuja una punta de flecha.
         * @param {CanvasRenderingContext2D} ctx - El contexto del canvas.
         * @param {number} fromX - Coordenada x del punto de inicio de la dirección.
         * @param {number} fromY - Coordenada y del punto de inicio de la dirección.
         * @param {number} toX - Coordenada x de la punta de la flecha.
         * @param {number} toY - Coordenada y de la punta de la flecha.
         * @param {number} size - El tamaño de la punta de la flecha.
         */
        function drawArrowhead(ctx, fromX, fromY, toX, toY, size) {
            const angle = Math.atan2(toY - fromY, toX - fromX);
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - size * Math.cos(angle - Math.PI / 6), toY - size * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - size * Math.cos(angle + Math.PI / 6), toY - size * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
            ctx.restore();
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.lineWidth = 1.5;

            const cx = 250;
            const cy = 225;
            const earthRadius = 70;
            const orbitRx = 190;
            const orbitRy = 115;
            const moonRadius = 6;
            const moonAngle = -0.7; // en radianes

            const moonX = cx + orbitRx * Math.cos(moonAngle);
            const moonY = cy + orbitRy * Math.sin(moonAngle);

            // 1. Dibujar la órbita (elipse discontinua)
            ctx.save();
            ctx.beginPath();
            ctx.setLineDash([6, 4]);
            ctx.ellipse(cx, cy, orbitRx, orbitRy, 0, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.restore();

            // 2. Dibujar la Tierra (círculo) y su etiqueta
            ctx.beginPath();
            ctx.arc(cx, cy, earthRadius, 0, 2 * Math.PI);
            ctx.stroke();
            drawSubscript(ctx, 'M', 'E', cx - 20, cy + 5);

            // 3. Dibujar el eje de rotación de la Tierra (línea discontinua)
            ctx.save();
            ctx.beginPath();
            ctx.setLineDash([6, 4]);
            ctx.moveTo(cx, cy - 170);
            ctx.lineTo(cx, cy + 170);
            ctx.stroke();
            ctx.restore();

            // 4. Dibujar la flecha de rotación de la Tierra (ω_E) y su etiqueta
            const wE_arrow_y_center = cy - 130;
            const wE_arrow_radius = 20;
            const wE_arrow_start_angle = 1.4 * Math.PI;
            const wE_arrow_end_angle = 1.9 * Math.PI;
            ctx.beginPath();
            ctx.arc(cx, wE_arrow_y_center, wE_arrow_radius, wE_arrow_start_angle, wE_arrow_end_angle);
            ctx.stroke();
            // Punta de flecha
            const wE_arrow_tip_x = cx + wE_arrow_radius * Math.cos(wE_arrow_end_angle);
            const wE_arrow_tip_y = wE_arrow_y_center + wE_arrow_radius * Math.sin(wE_arrow_end_angle);
            const wE_arrow_base_x = cx + wE_arrow_radius * Math.cos(wE_arrow_end_angle - 0.1);
            const wE_arrow_base_y = wE_arrow_y_center + wE_arrow_radius * Math.sin(wE_arrow_end_angle - 0.1);
            drawArrowhead(ctx, wE_arrow_base_x, wE_arrow_base_y, wE_arrow_tip_x, wE_arrow_tip_y, 10);
            // Etiqueta
            drawSubscript(ctx, 'ω', 'E', cx + 30, wE_arrow_y_center - 10);

            // 5. Dibujar la línea de distancia (r) y su etiqueta
            ctx.save();
            ctx.beginPath();
            ctx.setLineDash([6, 4]);
            ctx.moveTo(cx, cy);
            ctx.lineTo(moonX, moonY);
            ctx.stroke();
            ctx.restore();
            // Etiqueta
            ctx.font = "italic 22px 'Times New Roman'";
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            ctx.fillText('r', cx + (moonX - cx) * 0.5 + 15, cy + (moonY - cy) * 0.5);

            // 6. Dibujar la Luna y su etiqueta
            ctx.beginPath();
            ctx.arc(moonX, moonY, moonRadius, 0, 2 * Math.PI);
            ctx.fill();
            drawSubscript(ctx, 'M', 'm', moonX, moonY + 25);

            // 7. Dibujar la flecha orbital de la Luna (ω_m) y su etiqueta
            const arrowStartAngle = moonAngle - 0.25;
            const arrowEndAngle = moonAngle + 0.05; // La flecha termina un poco más allá de la luna
            const startX = cx + orbitRx * Math.cos(arrowStartAngle);
            const startY = cy + orbitRy * Math.sin(arrowStartAngle);
            const endX = cx + orbitRx * Math.cos(arrowEndAngle);
            const endY = cy + orbitRy * Math.sin(arrowEndAngle);
            const midX = cx + orbitRx * Math.cos((arrowStartAngle + arrowEndAngle) / 2);
            const midY = cy + orbitRy * Math.sin((arrowStartAngle + arrowEndAngle) / 2);
            
            const controlX = 2 * midX - startX / 2 - endX / 2;
            const controlY = 2 * midY - startY / 2 - endY / 2;
            
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.quadraticCurveTo(controlX, controlY, endX, endY);
            ctx.stroke();
            // Punta de flecha
            const tangentAngle = Math.atan2(endY - controlY, endX - controlX);
            const baseArrowX = endX - 5 * Math.cos(tangentAngle);
            const baseArrowY = endY - 5 * Math.sin(tangentAngle);
            drawArrowhead(ctx, baseArrowX, baseArrowY, endX, endY, 10);
            
            // Etiqueta
            drawSubscript(ctx, 'ω', 'm', moonX + 20, moonY - 20);

            // 8. Dibujar la leyenda
            ctx.font = "20px 'SimSun', 'Microsoft YaHei'";
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('力图 6.7.1', cx, canvas.height - 20);
        }

        draw();
    </script>
</body>
</html>